<template>
	<div>
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-search"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">筛选查询</font>
			<div style="float: right; width: auto;">
				<font color="#72767B" style="margin-left: 20px;">模糊条件</font>
				<div style="float: right; margin-right: 30px;">
					<el-button type="primary" @click="newinsert">查询</el-button>
				</div>
				<div style="float: right; width: auto;margin-right: 20px; margin-left: 20px;">
					<el-input v-model="findStore.userPhone" placeholder="请输入商品大类名称进行查询"></el-input>
				</div>
			</div>
			<div style="float: right; width: auto; margin-right: 20px;">
				<font color="#72767B" style="margin-right: 20px;">状态</font>
				<!-- <el-select clearable size='mini' v-model="state" placeholder="状态查询" autocomplete="off">
				  <el-option v-for="(item,index) in stateList" :label="item" :value ="index"></el-option>
				</el-select> -->
				  <el-select v-model="value" placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</div>
		</div>
		
		<div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);height: 60px;line-height: 60px; margin-top: 20px;">
			<div style="float: left; font-size: 30px; width: 60px; text-align: center; border-right: 2px solid #DCDDE0;">
				<i class="el-icon-s-grid"></i>
			</div>
			<font color="#72767B" style="margin-left: 20px;">数据列表</font>
			
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="dialogTableVisible = true">删除</el-button>
			</div>
			
			
			<el-dialog title="删除门店" :visible.sync="dialogTableVisible">
			  <el-table :data="gridData">
			    <el-table-column property="date" label="门店名称" width="100"></el-table-column>
			    <el-table-column property="name" label="联系人" width="100"></el-table-column>
			    <el-table-column property="address" label="管理仓库"></el-table-column>
				<el-table-column property="id" label="删除键" >
					<template slot-scope="scope">
						<el-button type="danger"  @click="Delect(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			  </el-table>
			</el-dialog>
			
			<div style="float: right; margin-right: 30px;">
				<el-button type="info" @click="dialog = true">修改</el-button>
			</div>
			
			<el-dialog title="修改门店1" :visible.sync="dialog">
			  <el-table :data="gridData">
			    <el-table-column property="date" label="门店名称" width="100"></el-table-column>
			    <el-table-column property="name" label="联系人" width="100"></el-table-column>
			    <el-table-column property="address" label="管理仓库"></el-table-column>
				<el-table-column property="id" label="修改键" >
					<template slot-scope="scope">
						<el-button type="danger"  @click="Update1(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
				
			  </el-table>
			</el-dialog>
			
			<el-dialog title="修改门店2" :visible.sync="dialogTable">
			  
				<el-form :model="form">
				  <el-form-item label="门店名称" :label-width="formLabelWidth">
				    <el-input v-model="form.storeName" autocomplete="off"></el-input>
				  </el-form-item>
								
					<el-form-item label="联系人" :label-width="formLabelWidth">
						<el-input v-model="form.userName" autocomplete="off"></el-input>
					</el-form-item>
								
					<el-form-item label="联系人电话" :label-width="formLabelWidth">
						<el-input v-model="form.userPhone" autocomplete="off"></el-input>
					</el-form-item>
								
					<el-form-item label="地址" :label-width="formLabelWidth">
						<el-input v-model="form.storeAddress" autocomplete="off"></el-input>
					</el-form-item>
								
					<template>
						<el-radio v-model="radio" label="0">启用</el-radio>
						<el-radio v-model="radio" label="1">停用</el-radio>
					</template>
								
					<template>
						<el-transfer v-model="value" :data="data"></el-transfer>
					</template>
				</el-form>
			  
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogTable = false">取 消</el-button>
			    <el-button type="primary" @click="Update2()">确 定</el-button>
			  </div>
			</el-dialog>
			
			<div style="float: right; margin-right: 30px;">
				<!-- <el-button type="info">新增</el-button> -->
				<el-button type="info" @click="dialogFormVisible = true">新增</el-button>
			</div>
			<!-- Form -->
			<el-dialog title="增加门店" :visible.sync="dialogFormVisible">
			  <el-form :model="form">
			    <el-form-item label="门店名称" :label-width="formLabelWidth">
			      <el-input v-model="form.storeName" autocomplete="off"></el-input>
			    </el-form-item>
				
				<el-form-item label="联系人" :label-width="formLabelWidth">
				  <el-input v-model="form.userName" autocomplete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="联系人电话" :label-width="formLabelWidth">
				  <el-input v-model="form.userPhone" autocomplete="off"></el-input>
				</el-form-item>
				
				<el-form-item label="地址" :label-width="formLabelWidth">
				  <el-input v-model="form.storeAddress" autocomplete="off"></el-input>
				</el-form-item>
				
				<template>
				  <el-radio v-model="radio" label="0">启用</el-radio>
				  <el-radio v-model="radio" label="1">停用</el-radio>
				</template>
				
				<template>
				  <el-transfer v-model="value" :data="data"></el-transfer>
				</template>
			    
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="insert">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			<!-- <div style="box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);margin-top: 4px;">
				<el-table height="600px" :data="tableData" border style="width: 100%">
					<el-table-column align="center" type="selection" width="55"></el-table-column>
					<el-table-column align="center" prop="date" label="日期" width="180"></el-table-column>
				  </el-table>、
			</div> -->
			<template>
			    <el-table :data="tableData,y" style="width: 100%">
			      <el-table-column prop="storeNumber" label="门店编号" > </el-table-column>
			      <el-table-column prop="storeName" label="门店名称" > </el-table-column>
				  <el-table-column prop="userName" label="联系人" > </el-table-column>
				  <el-table-column prop="userPhone" label="手机号" > </el-table-column>
				  <el-table-column prop="storeAddress" label="地址" > </el-table-column>
				  <el-table-column prop="warehouseName" label="关联仓库" > </el-table-column>
				  <el-table-column prop="storeState" :formatter="getstuta" label="状态" > </el-table-column>
			    </el-table>
				
			  </template>
			<div style="text-align: center;">
				<el-pagination :page-count="pageCount" @current-change="changePage" 
				:current-page="categoryPage.indexPage"  background layout="prev, pager, next"
				:total="total" :page-size="categoryPage.size">
				</el-pagination>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Category',
		data() {
			const generateData = _ => {
				const data = [];
				return data;
			};
			return {
				options: [{
					value: '选项1',
				    label: '启用'
				}, {
				    value: '选项2',
				    label: '停用'
				}],
				value: '',
				data: [],
				data: generateData(),
				value: [],
				//弹出框		
				gridData: [],
				dialogTableVisible: false,
				radio: "0",
				dialogFormVisible: false,
				
				dialog: false,
				dialogTable: false,
				form: {
					// storeId: null,
				    storeName: '',
				    userName: '',
				    userPhone: '',
				    storeAddress: '',
				    storeState: this.radio
				},
				
				formLabelWidth: '120px',
				//
				input: null,
				categoryPage: {
					indexPage: 1,
					size: 9
				},
				x: [],
				y: [],
				findStore: {
					storeState: null,
					userPhone: null
				},
				findWarehouse: {
					userPhone: null,
					warehouseState: null
				},
				newcategoryPage: {
					indexPage: 10,
					size: 10
				},
				store: null,
				pageCount: 10,
				total: 0,
				tableData: [],
				newtableData: [],
				warehouseName: [],
				z : 0,
				p: null,
				m : null,
				o: [],
				getstro:{
					storeId: null,
					storeName: null,
					userName: null,
					userPhone: null,
					storeAddress: null,
					storeState: null
				}
			}
		},
		methods: {
			open1() {
			    this.$notify({
					title: '成功',
					message: '删除成功',
					type: 'success'
				});
			},
			open2() {
				this.$notify.error({
			        title: '错误',
			        message: '删除错误'
			    });
			},
			open3() {
			    this.$notify({
					title: '成功',
					message: '添加成功',
					type: 'success'
				});
			},
			open4() {
				this.$notify.error({
			        title: '错误',
			        message: '添加错误'
			    });
			},
			open5() {
			    this.$notify({
					title: '成功',
					message: '修改成功',
					type: 'success'
				});
			},
			open6() {
				this.$notify.error({
			        title: '错误',
			        message: '修改错误'
			    });
			},
			newinsert(){
				this.loadDate()
			},
			Update1(id){
				// this.getstro.storeId = id
				this.form.storeId = id,
				console.log(this.form.storeId),
				this.dialogTable = true
			},
			//修改门店
			Update2(){
				console.log(this.form)
				this.$http.post("store/storeUpdate",this.form)
				.then((resp)=>{
					if(resp.data.code==200){
						this.open5()
					}else{
						this.open6()
					}
					this.dialog = false
					this.dialogTable = false
					this.loadDate();
				})
			},
			//添加门店
			insert(){
				console.log(this.form)
				this.$http.post("/store/storeAdd",this.form)
				.then((resp)=>{
					if(resp.data.code==200){
						this.open3()
					}else{
						this.open4()
					}
					this.loadDate();
					this.dialogFormVisible=false
				})
			},
			//删除门店
			Delect(id){
				console.log(id)
				this.$http.post("/store/storedelect",{
					storeId: id
				})
				.then((resp)=>{
					if(resp.data.code==200){
						this.open1()
					}else{
						this.open2()
					}
					this.loadDate();
					this.dialogTableVisible=false
				})
			},
			
			//查询所有仓库
			getzjball(){
				this.$http.post("/warehouse/warehouseAll",{
					warehouseParam1: this.newcategoryPage,
					warehouseListParam: this.findWarehouse
				}).then((resp)=>{
					this.data = []
					this.newtableData = resp.data.data.warehouseDto1s
					for(var x=0;x<this.newtableData.length;x++){
						this.warehouseName[x] = this.newtableData[x].warehouseName
						this.data.push({
							key: this.newtableData[x].warehouseId,
							label: this.warehouseName[x],
							disabled: null
						})
					}
					console.log(this.warehouseName)
				})
			},
			
			//查询所有门店
			loadDate() {
				
				this.$http.post("/store/all",{
					pageparam: this.categoryPage,
					tasklistorderparam: this.findStore
				}).then((resp)=> {
					// console.log(resp)
					if(resp.data.code==200){
						this.gridData = []
						this.tableData = resp.data.data.storeDto1s
						this.total = resp.data.data.totals
						this.categoryPage.indexPage = resp.data.data.pageSize
						for(var i = 0;i<this.tableData.length;i++){
							console.log("============="+this.tableData[i].storeId)
							this.x.push(this.tableData[i].storeId);
							this.gridData.push({
								id: this.tableData[i].storeId,
								date: this.tableData[i].storeName,
								name: this.tableData[i].userName,
								// address: 
							})
						}
						// console.log("===============")
						// console.log(this.x)
						this.getwarehouseName()
						this.getzjball()
					}
				}).catch(function(error){
					console.log(error)
				})
			},
			//初始化仓库
			getwarehouseName(){
				this.tableData.forEach(item =>{
					this.$set(item,'warehouseName','暂无')
				})
				this.getzjb();
			},
			//查找中间表，获取仓库名称
			getzjb(){
				let s = {};
				let m = {};
				for(let i=0;i<this.x.length;i++){
					this.$http.post("/store-warehouse/getStoreIdByWarehouse",{
						storeId: i
					})
					.then((resp)=>{
						

						if(resp.data.data[0]!=undefined){
							this.o = []
							s = resp.data.data
							
							if(this.z=s.length){
								this.z=0
								this.p=""
							}
							// this.getware(i,resp.data.data[0].warehouseName,null)
							for(let l = 0;l<s.length-1;l++){
								this.o.push({name: resp.data.data[l].warehouseName})
							}
							this.getware(i,this.o,s.length)
						}
					}).catch(function(error){
						console.log(error)
					})
				}
			},
			changePage(pe){
				this.categoryPage.indexPage = pe;
				this.loadDate();
			},
			//添加仓库
			getware(i,c,d){
				// console.log(this.z)
				var v = null
				// console.log(i,c,d)
				// console.log(c.length)
				for(var x = 0;x<c.length;x++){
					if(x==0){
						v = c[x].name
					}
					v= v+","+c[x].name
				}
				console.log("=================")
				// console.log(v)
				console.log(this.tableData)
				for(var y=0;y<this.tableData.length;y++){
					if(this.tableData[y].storeId==i){
						this.$set(this.tableData[y],'warehouseName',v);
						this.$set(this.gridData[y],'address',this.v)
					}
				}
			},
			getstuta(row){
				if(row.storeState==0){
					return '启用'
				}else{
					return '停用'
				}
			}
		},
		created() {
			this.loadDate();
			// this.getzjball();
			this.getwarehouseName();
		}
	}
</script>

<style>
</style>
